<template>
  <div>
    <p>
      用户名：
      <input type="text" v-model.lazy="name" />
    </p>
    <p>{{tip}}</p>
  </div>
</template>>
<script>
import { setup, ref, watch } from "vue";
/*      侦听器
        1.采用侦听器监听用户名的变化
        2.调用后台接口进行验证
        3.根据验证的结果调整提示信息
      */
export default {
  setup() {
    const name = ref("");
    const tip = ref("");
    //侦听器
    watch(name, (newValue, oldValue) => {
      console.log(`旧值是：${oldValue}, 新值是：${newValue}`);
      //调用接口，但是可以使用定时任务的方式模拟接口调用
      setTimeout(function() {
        //模拟接口调用
        if (newValue == "admin") {
          tip.value = "用户名已经存在，请更换一个";
        } else {
          tip.value = "用户名可以使用";
        }
      }, 1000);
    });
    return {
      name,
      tip
    };
  }
};
</script>